<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
    bottom?: string | number
}>()

const customBottom = computed(() => {
    if (props.bottom === undefined) return '0'
    return typeof props.bottom === 'number' ? `${props.bottom}px` : props.bottom
})
</script>

<template>
    <div class="umrp-action-bar" :style="{ bottom: customBottom }">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-action-bar {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 998;
}
</style>